<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>mmkit: Samples &raquo; Fonts</title>
	<meta name="description" content="mmkit css library font sample page" />
	<meta name="keywords" content="mmkit fonts" />
	<meta name="robots" content="all" />
	<meta http-equiv="imagetoolbar" content="no" />

	<!-- Framework CSS -->
	<link rel="stylesheet" href="../mmkit/base/screen.css" type="text/css" media="all" />
	<link rel="stylesheet" href="../mmkit/base/print.css" type="text/css" media="print" />
	<!--[if IE]><link rel="stylesheet" href="../mmkit/base/ie.css" type="text/css" media="all" /><![endif]-->
	
	<style type="text/css">
		body {
			text-align: center;
			padding: 0px 10px;
		}
		
		.container {
			width: 960px;
			margin: 0px auto;
			text-align: left;
			background: url(grid.png);
		}
		#unit-font-samples div {
			width: 300px;
			float: left;
			margin-right: 0px;
			padding: 0px 10px;
			-webkit-transition: color, background-color 0.3s linear;
		}
		#unit-font-samples div:hover {
			background-color: black;
			color: #FFF;
		}
		#unit-font-samples div:hover h1, #unit-font-samples div:hover h2, #unit-font-samples div:hover h3, #unit-font-samples div:hover h4, #unit-font-samples div:hover h5, #unit-font-samples div:hover h6{
			color: #FFF;
		}
		
		#unit-font-samples :nth-child(3n-1) {
			clear: left;
			
		}

	</style>
</head>
<body>
	<div id="wrapper" class="container group">

		<h1>Font Stacks</h1>
		<p>Part of <a href="http://code.google.com/p/mmkit/">mmkit</a> - Most stacks from <a href="http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/">Unit Interactive</a></p>

		<ul>
			<?php
			$d = dir(dirname(__FILE__).'/../mmkit/fonts');
			while (false !== ($entry = $d->read())) {
				if( '.' == $entry[0]) continue;

				?>
				<style type="text/css">
					<?php
						$f = file($d->path . '/' . $entry);
						$class = '.font-'. str_replace('.css','',$entry);
						foreach( $f as $l ) {
							echo $class, ' ', 
							str_replace(array('body', ', h', ', select',', input',', select'), array('',", $class h"), $l), "\n"; 
						}
					?>
				</style>

				<li class="font-<?php echo str_replace('.css','',$entry) ?>"><a href="#font-<?php echo str_replace('.css','',$entry) ?>"><?php echo str_replace('.css','',$entry) ?></a></li>
			<?php
			}
			$d->close();
			?>
		</ul>
		
		<div id="unit-font-samples" class="unit">

		<?php
		$d = dir(dirname(__FILE__).'/../mmkit/fonts');
		while (false !== ($entry = $d->read())) {
			if( '.' == $entry[0]) continue;

			?>
			<style type="text/css">
				<?php
					$f = file($d->path . '/' . $entry);
					$class = '.font-'. str_replace('.css','',$entry);
					foreach( $f as $l ) {
						echo $class, ' ', 
						str_replace(array('body', ', h', ', input', ', textarea', ', button'), array('',", $class h",", $class input",", $class textarea",", $class button"), $l), "\n";
					}
				?>
			</style>

			<div id="id-<?php echo str_replace('.css','',$entry) ?>" class="font-<?php echo str_replace('.css','',$entry) ?>">
				<h1><?php echo $entry ?></h1>

				<h2>Level 02 Heading</h2>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>

				<h2>Level 02 Heading</h2>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				<h3>Level 03 Heading</h3>

				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				<h4>Level 04 Heading</h4>
				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
				<h5>Level 05 Heading</h5>

				<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p>
			</div>
		<?php
		}
		$d->close();
		?>
		</div>

	</div>
</body>
</html>